<template>
	<div class="root">
		<div class="backimg">
			<!-- <img src="http://qnkf.laigl.com/mobilepng/pinggu.png" alt=""> -->
			<img src="http://qnkf.laigl.com/20210420/2c106a15f0a5e1e08edc42d8c935cd6.png" alt="">
			<!-- <img @click="getAssessment(info[0].id,info[0].cover,info[0].title)" src="http://qnkf.laigl.com/mobilepng/pinggu_circle.png" alt="">
			<img @click="getAssessment(info[1].id,info[1].cover,info[1].title)" src="http://qnkf.laigl.com/mobilepng/pinggu_circle.png" alt="">
			<img @click="getAssessment(info[2].id,info[2].cover,info[2].title)" src="http://qnkf.laigl.com/mobilepng/pinggu_circle.png" alt="">
			<img @click="getAssessment(info[3].id,info[3].cover,info[3].title)" src="http://qnkf.laigl.com/mobilepng/pinggu_circle.png" alt="">
			<img @click="getAssessment(info[4].id,info[4].cover,info[4].title)" src="http://qnkf.laigl.com/mobilepng/pinggu_circle.png" alt="">
			<img @click="getAssessment(info[5].id,info[5].cover,info[5].title)" src="http://qnkf.laigl.com/mobilepng/pinggu_circle.png" alt=""> -->
			
			<i @click="getAssessment(info[1].id,info[1].cover,info[1].title)" class="iconfont icon-shouzhi"></i>
			<i @click="getAssessment(info[2].id,info[2].cover,info[2].title)" class="iconfont icon-shouzhi"></i>
			<i @click="getAssessment(info[0].id,info[0].cover,info[0].title)" class="iconfont icon-shouzhi"></i>
			<i @click="getAssessment(info[3].id,info[3].cover,info[3].title)" class="iconfont icon-shouzhi"></i>
			<i @click="getAssessment(info[4].id,info[4].cover,info[4].title)" class="iconfont icon-shouzhi"></i>
			<i @click="getAssessment(info[5].id,info[5].cover,info[5].title)" class="iconfont icon-shouzhi"></i>
		</div>
		<div class="tips">
			<img src="http://qnkf.laigl.com/mobilepng/pinggu_up.png" alt="">
			<p>请先选择部位进行评估</p>
		</div>
	</div>
</template>

<script>
	import {Toast} from 'vant'
	export default{
		data(){
			return{
				info:[]
			}
		},
		methods:{
			getAssessment(id,cover,title){
				// console.log(id);
				this.$router.push('./reportList?id='+id+'&user_id='+this.$route.query.user_id+'&cover='+cover+'&title='+title)
			},
			getInfo(){
				let openid = localStorage.getItem('openid')
				this.$axios.post('assessment/index',{openid:openid}).then(res => {
					this.info = res.data.data
				});
			}
		},
		created() {
			this.getInfo()
		}
	}
</script>

<style scoped lang="less">
	.root{
		min-width: 100vw;
		overflow: hidden;
		height: 100vh;
		@keyframes moveArrow {
		    0% {
		        transform: translateY(0);
		        -webkit-transform: translateY(0);
		    }
		    50% {
		        transform: translateY(-2vh);
		        -webkit-transform: translateY(-2vh);
		    }
				100% {
				    transform: translateY(0);
				    -webkit-transform: translateY(0);
				}
		}
		@keyframes fingerScale {
		    0% {
		        transform: scale(1);
		        -webkit-transform: scale(1);
		    }
				50% {
				    transform: scale(1.1);
				    -webkit-transform: scale(1.1);
				}
				100% {
				    transform: scale(1);
				    -webkit-transform: scale(1);
				}
		}
		.backimg{
			width: 100%;
			height: 100%;
			position: relative;
			// 背景
			img:nth-child(1){
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			// 颈椎
			img:nth-child(2){
				width: 2rem;
				height: 2rem;
				position: absolute;
				top: 16vh;
				left: 46vw;
			}
			// 肩部
			img:nth-child(3){
				width: 2rem;
				height: 2rem;
				position: absolute;
				top: 19vh;
				left: 32.6vw;
			}
			// 腰部
			img:nth-child(4){
				width: 2rem;
				height: 2rem;
				position: absolute;
				top: 33vh;
				left: 46vw;
			}
			// 髋部
			img:nth-child(5){
				width: 2rem;
				height: 2rem;
				position: absolute;
				top: 41vh;
				left: 56vw;
			}
			// 膝部
			img:nth-child(6){
				width: 2rem;
				height: 2rem;
				position: absolute;
				top: 60vh;
				left: 38vw;
			}
			// 足部
			img:nth-child(7){
				width: 2rem;
				height: 2rem;
				position: absolute;
				top: 80vh;
				left: 58vw;
			}
			i:nth-of-type(1){
				position: absolute;
				top: 17.5vh;
				left: 46vw;
				font-size: 3rem;
				color: #fff;
			}
			i:nth-of-type(2){
				position: absolute;
				top: 20.5vh;
				left: 31.6vw;
				font-size: 3rem;
				color: #fff;
			}
			i:nth-of-type(3){
				position: absolute;
				top: 31.5vh;
				left: 46vw;
				font-size: 3rem;
				color: #fff;
				animation: 0.5s fingerScale linear infinite;
			}
			i:nth-of-type(4){
				position: absolute;
				top: 42.5vh;
				left: 55.5vw;
				font-size: 3rem;
				color: #fff;
			}
			i:nth-of-type(5){
				position: absolute;
				top: 62vh;
				left: 37vw;
				font-size: 3rem;
				color: #fff;
			}
			i:nth-of-type(6){
				position: absolute;
				top: 81.5vh;
				left: 58vw;
				font-size: 3rem;
				color: #fff;
			}
		}
		.tips{
			position: fixed;
			bottom:2.5rem;
			height: 4rem;
			width: 100%;
			left:0;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			img{
				position: absolute;
				top: 0.5rem;
				width: 1rem;
				height: .5rem;
				animation:1.5s moveArrow linear infinite normal ;
			}
			p{
				color: #F6F6F9;
				margin-top: 1rem;
				font-size: 1.2rem;
				font-weight: 600;
				letter-spacing: .15rem;
			}
		}
	}
</style>
